<script setup>
import { host_custom } from "@/host.js";
import { onMounted, onUnmounted, ref } from "vue";
import { userStore } from "@/stores/userStore.js";
import { storeToRefs } from "pinia";
import friend_online from "@/assets/sound/friend_online.mp3";
import friend_offline from "@/assets/sound/friend_offline.mp3";

const offlineElement = ref();
const onlineElement = ref();

const userAction = userStore();
const { userInfo } = storeToRefs(userAction);

const prop = defineProps({
  friendList: {
    required: true,
    type: Array
  },
  listFilter: {
    required: true,
    type: String
  }
})
</script>

<template>
  <div v-if="prop.listFilter === 'online'">
    <ul class="p-2">
      <template v-for="item in prop.friendList" :key="item.id">
        <li class="d-flex align-items-center justify-content-between p-1 mb-2 friendList" v-if="item.isOnline">
          <div class="d-flex align-items-center">
            <div class="position-relative friendPfp">
              <img
                  :src="host_custom + `/pfp/${item.avatar}`"
                  alt="pfp"
                  class="rounded-circle"
                  width="36"
                  height="36"
                  :class="[item.isOnline ? 'onlineStyle' : 'offlineStyle']"
              />
              <font-awesome-icon
                  :icon="['fas', 'circle-dot']"
                  size="2xs"
                  class="status"
                  :class="item.isOnline ? 'text-success' : 'text-secondary'"
              />
            </div>
            <div class="ps-2" style="line-height: 20px">
              <p class="m-0 username">{{ item.name }}</p>
              <small>{{ item.isOnline ? '在线' : '离线' }}</small>
            </div>
          </div>

          <div class="d-flex">
            <div class="friendAction me-2"><font-awesome-icon class="fIcon" :icon="['fas', 'comment']" size="lg"/></div>
            <div class="friendAction"><font-awesome-icon class="fIcon" :icon="['fas', 'ellipsis-vertical']" size="lg" /></div>
          </div>
        </li>
      </template>
    </ul>
  </div>

  <div v-else>
    <ul class="p-2 w-100">
      <li class="d-flex align-items-center justify-content-between p-1 mb-2 friendList" v-for="item in prop.friendList" :key="item.id">
        <div class="d-flex align-items-center overflow-hidden">
          <div class="position-relative friendPfp">
            <img
                :src="host_custom + `/pfp/${item.avatar}`"
                alt="pfp"
                class="rounded-circle"
                width="36"
                height="36"
                :class="[item.isOnline ? 'onlineStyle' : 'offlineStyle']"
            />
            <font-awesome-icon
                :icon="['fas', 'circle-dot']"
                size="2xs"
                class="status"
                :class="item.isOnline ? 'text-success' : 'text-secondary'"
            />
          </div>
          <div class="ps-2 overflow-hidden" style="line-height: 20px">
            <p class="m-0 username text-truncate">{{ item.name }}</p>
            <small class="text-truncate">{{ item.isOnline ? '在线' : '离线' }}</small>
          </div>
        </div>

        <div class="d-flex">
          <div class="friendAction me-2"><font-awesome-icon class="fIcon" :icon="['fas', 'comment']" size="lg"/></div>
          <div class="friendAction "><font-awesome-icon class="fIcon" :icon="['fas', 'ellipsis-vertical']" size="lg" /></div>
        </div>
      </li>

      <li class="d-none">
        <audio ref="offlineElement" :src="friend_offline"></audio>
        <audio ref="onlineElement" :src="friend_online"></audio>
      </li>
    </ul>
  </div>
</template>

<style scoped>
.username {
  font-weight: 400;
  color: var(--bs-emphasis-color);
}

.friendAction {
  transition: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  border-radius: 50%;
}

.offlineStyle {
  filter:saturate(.2) brightness(.9);
}

.onlineStyle {
  filter:saturate(1) brightness(1);
}

.status {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--bs-body-bg);
  padding: 2px;
  bottom: -3px;
  right: -3px;
  position: absolute;
}

.friendList {
  transition: none;
  border-radius: 5px;
  cursor: pointer;
  user-select: none;
}

.friendList:hover {
  background-color: var(--bs-tertiary-bg);
}

.friendList:hover .friendAction {
  background-color: var(--bs-dark-bg-subtle);
}



</style>